<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.search-video-list {
  width: 10rem;
  height: 86vh;

  // 清除浮动（已有）
  &::after {
    content: '';
    display: block;
    clear: both;
  }

  .video-item {
    width: 4.8rem;
    border: 0.1rem solid #fff;
    height: 6.5333rem;
    float: left;
    position: relative;

    .item-img {
      width: 4.8rem;
      height: 6.5333rem;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .item-content {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%; // 改用100%，继承父元素宽度
      height: 1.3333rem;
      box-sizing: border-box;
      padding: 0 0.1rem; // 增加内边距，避免文字贴边

      .item-desc {
        width: 100%;
        height: 0.6667rem;
        overflow: hidden; // 隐藏溢出内容（已有）

        p {
          font-size: 0.2rem;
          color: #fff;
          // 新增：单行文本溢出显示省略号
          white-space: nowrap; // 不换行
          text-overflow: ellipsis; // 显示省略号
          overflow: hidden; // 隐藏溢出
        }
      }

      .item-info {
        @include flex-align-center;
        height: 0.6667rem; // 固定高度，避免内容溢出

        img {
          width: .4rem; // 适当缩小头像，避免挤压文字
          height: .4rem;
          border-radius: 50%;
          margin-right: 0.1rem;
        }

        // 作者名称（第一个p标签）
        p:first-child {
          font-size: 0.25rem; // 缩小字体，避免过长
          color: #fff;
          // 新增：作者名溢出显示省略号
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          max-width: 2rem; // 限制最大宽度，给点赞数留空间
        }

        // 点赞数（第二个p标签）
        p:last-child {
          font-size: 0.25rem;
          color: #fff;
          margin-left: 0.1rem; // 增加与作者名的间距

          i {
            font-size: 0.25rem;
            margin-right: 0.05rem;
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="user-search">
    <SearchHeader :defaultTab="'video'" :placeholder="'视频描述'" @back="handleBack" @tab-change="handleSwitchTab"
      @search="handleSearch" />
    <div class="search-video-list">
      <div class="video-item" v-for="item in searchVideoList" :key="item.videoId">
        <div class="item-img">
          <img :src="item.Video.videoCover" alt="">
        </div>
        <!-- 视频描述 -->
        <div class="item-content">
          <div class="item-desc">
            <p>{{ item.Video.videoDesc }}</p>
          </div>
          <!-- 视频作者 -->
          <div class="item-info">
            <img :src="item.Video.userAvatar" alt="">
            <p>{{ item.Video.userNickname }}</p>
            <p><i class="iconfont icon-aixin"></i>{{ item.WSLCNum.likeNum }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import SearchHeader from '@/components/common/SearchHeader.vue'
import { useRouter } from 'vue-router'
import { searchVideoAPI } from '@/api/search/search'
import { useUserStore } from '@/store/modules/user/user'
const userStore = useUserStore()
const router = useRouter()
let page = 1
let id = userStore.userInfo.userId
// 搜索视频
const searchVideoList = ref([])
const handleBack = () => {
  router.push('/home')
}
const handleSwitchTab = (tab) => {
  if (tab === 'video') {
    router.push('/search/video')
  } else if (tab === 'user') {
    router.push('/search/user')
  }
}
const handleSearch = async (params) => {
  try {
    const res = await searchVideoAPI(id, page, params.key)
    if (res.code === 200) {
      searchVideoList.value = res.data
    }
    console.log(searchVideoList.value);
  } catch (error) {
    console.log(error);
  }
}
</script>